<template>
	<!-- 人员头像卡片 -->
	
		<view style="width: 100%;display: flex;justify-content:start;">
			<!-- 选择区域 -->
			<view  style="position: relative;" :style="{backgroundColor:isSelectMode?'#eee':'transparent'}">
				<!-- 选中图标 --> 
				<view v-if="isSelectMode" style="
					z-index: 10;
					position:absolute;
					width: 10px;
					height: 10px;
					right:0;
					top:0;
					background-color: limegreen;
				"
					:style="{
						backgroundColor:selected ? 'limegreen' : 'white',
						border: selected ? 'none' : 'solid 1px #aaa',
						borderRadius: '3px'
					}"
				>
					<u-icon v-if="selected" name="checkbox-mark" color="white" size="24"></u-icon>
				</view>
				<view class="avatar" style="display:inline-block;position:relative;border: solid 1rpx #e8e8e8;margin:0px 5rpx;padding: 8rpx;box-shadow: rgb(186 186 186 / 31%) 0px 0px 10px 0px;background-color: white;border-radius: 100px;">
					<u-avatar :customStyle="{filter:isOK ? 'none' : 'grayscale(100%)' }" size="45" :src="absUrl(enroll.enroller.head_icon_url)"></u-avatar>
				</view>
			</view>
			
			<view style="text-align: center;padding:3rpx;top:82%;">
				<view style="margin: 4rpx 0px;border-radius: 5px;display: flex;">
					<view style="font-size: 10px;color: #666;white-space:nowrap;box-sizing: content-box;background-color:#fff;padding:0 5px;">
						姓名:<text style="font-weight: 700;font-size: 12px;color: #000;">{{enroll.enroller.name}}</text>
					</view>
					<text style="font-size: 10px;padding:0 5px;">
						性别:{{enroll.enroller.sex == "female" ? '女' : '男'}}
					</text>
					<text style="font-size: 10px;padding:0 5px;">
						年龄:{{34}}岁
					</text>
				</view>
				
				<view style="display: flex;padding: 4rpx 0px;background-color:white;">
					<text style="font-size: 10px;padding:0 5px;">
						身份证:{{enroll.enroller.id_number}}
					</text>
					
				</view>
	
				<view style="display: flex;padding: 4rpx 0px;background-color:white;">
					<text style="font-size: 10px;padding:0 5px;">
						电话:{{enroll.enroller.phone_number}}
					</text>
				</view>
				
	<!-- 			<view style="justify-content: center;align-items: center;display: flex;padding: 4rpx 0px;background-color:white;">
					<u-icon v-if="enroll.enroller.sex == 1" name="man" color="#3b91e1" size="14"></u-icon>
					<u-icon v-if="enroll.enroller.sex == 2" name="woman" color="#e146ab" size="14"></u-icon>	
				</view> -->
				<!-- <slot name="label"></slot> -->
			</view>
			
			
			<view @click.native.stop="" @click="onContact" style="flex: 1;display: flex;justify-content: flex-end;" >
				<view style="display: flex;justify-content: center;align-items: center;">
					<i class="iconfont icon-renyuanpinggu" style="width: 40rpx;height:40rpx;"></i>
					<view style="padding: 0 7rpx;">沟通</view>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		props:{
			enroll:{
				type:Object,
				default:null
			},
			index:{
				type:Number,
				default:-1
			},
			isSelectMode:{
				type:Boolean,
				default:false
			},
			isOK:{
				type:Boolean,
				default:false
			},
			selected:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return {
				//enroll:null
			}
		},
		methods: {
			onContact()
			{
				console.log('>>>>>>>>>>>>>')
				uni.navigateTo({
					url:'/pages/job/user/job-state/message'
				})
			}
		}
	}
</script>
